Getting started

Express Thumbnail Creator

What is Express Thumbnail Creator?

Express Thumbnail Creator (ETC) allows you to quickly and easily create HTML image galleries with thumbnails, even if you have no idea about HTML and graphics.

This powerful and flexible, yet easy to use utility has a wizard-style interface and you can operate it with just a few mouse clicks. Creating a great-looking HTML image galleries has never been easier: by using Express Thumbnail Creator you will forget about hand working at all! ETC will do everything for you, just point-n-click a couple of buttons and wait for a few seconds to see your new image gallery come alive! If you are not satisfied with the look of your creation, wide range of flexible settings will help you customize its appearance.

Advanced users who have some knowledge of HTML (and optionally CSS) may create and edit their own templates - this gives even more control over the galleries appearance.

Related topics:

  • Quick start


Quick Start

Creating an image gallery is as easy as "2 + 2 = 4":

  1. Run Express Thumbnail Creator, choose Create a new project and click Next.
  2. Click [image] button and select the directory containing your image files (or add files individually, using [image] button) and click Next.
  3. Select the directory where the generated files will be placed.
  4. Then use the quick bar to go directly to Generate section and click Generate ALL.

That's it! You may now press Show created HTML pages button and enjoy your newly built image gallery.

The above steps are quite enough for creating an image gallery using default settings. If you are not satisfied with the results, try to play with wide range of flexible options.

Need more details? Read the Step by step instructions section.


How to buy

Express Thumbnail Creator is not freeware. You are entitled to use it for evaluation purposes without charge for a period of 30 days. If you want to use ETC after the 30-day evaluation period you must pay a registration fee. For information about prices and ordering details (credit cards, voice, fax, and snail mail) please go to

http://www.express-soft.com/etc/order.html

By purchasing Express Thumbnail Creator you are not only paying for what you have, but also investing in the future. Once you become a registered user, all minor upgrades of this software will be available to you free of charge. You will also get discounts on new versions of Express Thumbnail Creator. Registration also entitles you to receive lifelong free technical support via e-mail.

Note! Before you register, make sure you have the latest version of the software. The latest version is always can be downloaded at the following link:

http://www.express-soft.com/ftp/etc_setup.exe


Step 1. Creating a new project

1. Creating a new project

Run Express Thumbnail Creator, if it's not yet started. You'll see the Main window of ETC. The buttons at the top (the quick bar) are used for quick navigation among the sections (steps) of the project - this term is used to denote each individual image gallery. You are not bound to follow all the steps consecutively and may skip any of them - if some important data appears to be omitted, Express Thumbnail Creator will prompt you to enter it. However, you may use the Back and Next buttons at the bottom to follow all the steps of project.

When you run the program it offers to choose between two options: Create a new project and Open an existing project. If you are running ETC for the first time, you may just press Next. If you have already created some gallery using ETC and want to modify it, select Open an existing project and also click Next. In the appeared dialog window select a project you want and click Open.

Next step: 2. Adding images


Step 2. Adding images

2. Adding images

The second stage of the project includes adding new images to the list and arranging them in a desired order.

There are two ways of adding image files to the list:

  1. Click the [image] button - a popup menu will be appeared;
  2. If all your images are stored in one folder, select "Add folder" to add all of them at a time. If you have several folders with images and want to add them all, repeat this step for each folder.
  3. If you want to add just one image or several images dispersed all over your hard disk, select "Add files" to select individual images. To select more than one image use SHIFT and CTRL keys.

When you have added all necessary image files, it's time to arrange them in a desired order. Select the image you want to move and use [image] and [image] arrows to move it up and down the list.
If you want to remove some images from the list, use [image] button to remove an selected image from the list or use [image] button to clear the list (i.e. remove ALL images from the list).

You may specify short and long titles for each image. Simply select any image and enter the titles below of image list. By entering the titles use Up and Down keys to move the selection in the image list.

If you are using "Crop image to fit width and height" option (see page 3.3 Options - Thumbnails), you may specify an alignment for cropping.

After you have arranged all the images in a desired order, click Next to proceed to the next stage.

Next step: 3. Project Options


Step 3. Project Options

3. Project Options

Now, when you have determined the number and sequence of images in your gallery, it's time to specify the destination folder where all the generated files will be placed and tweak the appearance of you gallery pages. Express Thumbnail Creator offers you full control over the design of your image gallery.

This stage includes seven sub-steps, which are displayed in a list at the left. You can also use this list in the same manner as the quick bar to navigate among various options. There are following sub-steps:

  1. Destination folders
  2. Style
  3. Thumbnails
  4. Index tables
  5. Index pages
  6. Images
  7. Image pages

Next step: 3.1. Destination folders


Step 3.1. Destination folders

3.1. Project Options: Destination folders

First of all you need to specify the folder in which all the generated files (thumbnails, modified images, HTML pages and additional files) will be placed. Click the folder button near the Destination folder edit box and in the appeared dialog window select the destination folder you want.

Note! We recommend that you store your gallery in a separate folder. This will help you keep your source images untouched.

Hint: This is the only option you must specify. You can skip all other settings and press Generate button in the quick bar to proceed to the final step.

When the program will generate your image gallery, existing files can be overwritten or only new files can be added. By default, ETC will prompt you to overwrite or skip such files (Ask me option), but you can specify that all existing files must be skipped (Add only option) or recreated (Overwrite option).

Next step: 3.2. Style


Step 3.2. Style

3.2. Project Options: Style

Now you may select a style for your gallery.

Style is a combination of settings that defines the appearance of your image gallery. It includes the background colors, appearance of index tables, colors of text, links etc.

Express Thumbnail Creator distribution pack already contains some predefined styles created by our designers. You can use them as templates for creating your own styles.

Hint: After you have adjusted the design of your gallery to the extent you are quite happy with, you may save it to re-use later. For this just go to Project menu and select Save style.

Creating and saving custom styles will help you easily re-use the settings of your successful projects in the future.

Next step: 3.3. Thumbnails


Step 3.3. Thumbnails

3.3. Project Options: Thumbnails

During this step you can specify the appearance of pages containing thumbnail images linked to the pages containing full-size images.

Size section lets you specify width and height of thumbnail images. By default both dimensions are set to 120 pixels. In the table below you can see the examples of how different settings influence the thumbnails appearance.

1.
2.
3.
4.
  1. Fixed width, fixed height, cropped images: the image dimensions are decreased so that its narrow side is equal to the set value (100 pixels in this example), the wide side is cropped to fit the same size.
  2. Fixed width, fixed height: the wide side of each image is decreased to the set value (100 pixels in this example), the narrow side is proportionally shrunk.
  3. Fixed width: the horizontal side of each image is decreased to the set value (100 pixels in this example), the vertical side is proportionally shrunk.
  4. Fixed height: the vertical side of each image is decreased to the set value (100 pixels in this example), the horizontal side is proportionally shrunk.

Border section defines whether there should be a thin border around the thumbnails. Mark the checkbox if you want to have the border and set it width and color using the fields below.

File name section defines a suffix or a prefix added to the names of thumbnail images (this may be crucial if you store thumbnails in the same folder as full-size images).

Image format settings - click this button to adjust quality of generated thumbnails. Image thumbnails are saved in JPEG format, no matter what the format of source images is. JPEG uses lossy compression, which reduces file size deleting unimportant image information. This means that as you increase the compression, you decrease visual quality of the image. You may use this dialog to find the best balance between the two. There are several methods for changing values in the number box. You can type the number, click the spin controls or drag the slider. Check on the Progressive encoding checkbox if you want users to see rough copy of the image as it downloads (the image gradually sharpens as the file loads). Using progressive encoding makes files size a bit bigger.

Next step: 3.4. Index tables


Step 3.4. Index tables

3.4. Project Options: Index tables

Use this section to customize the appearance of the index tables (table with thumbnail images linked to full-size ones).

Table size part is used to set the number of rows and columns. If the number of images exceeds the resulting number of cells several index pages will be created. If you want all thumbnails to be placed on a single page, mark Single page checkbox. The number of columns will remain unchanged, but the number of rows will be increased up to the necessary limit.

Layout part contains two parameters: Cell spacing defines the number of pixels between adjacent cells. Cell padding defines the width of margin inside each cell (between the cell border and its content).

Borders part defines thickness and appearance of the table outer border. Border width is thickness of border in pixels. Flat borders checkbox may be used to customize the style of border lines (flat [image] or 3D [image]). Border color - applies only to flat borders (3D borders are always gray).

Background part lets you select a background image for your gallery or specify a background color (default background color depends on the style you have selected).

Next step: 3.5. Index pages


Step 3.5. Index pages

3.5. Project Options: Index pages

Index pages contain tables with thumbnails linked to full-size images. This section lets you customize their colors, navigation links and texts.

Page title - a caption displayed at the top of each index page.
Thumbnail alternative text - text, which is visible in thumbnail images placeholders while they are loading.
Thumbnail title - caption displayed under each thumbnail.

The last two parameters can contain simple text (the same for all thumbnails), or you can use special expressions, which will add individual text for each thumbnail. Here is the list of these expressions:

%etcShortTitle% | short title of image (you can specify short title for each image on the page 2. Adding Images)
%etcLongTitle% | long title of image (you can specify long title for each image on the page 2. Adding images)
%etcIndexIndex% | index page number
%etcIndexCount% | total number of index pages
%etcImageIndex% | image number
%etcImageCount% | total number of images
%etcImageSize% | dimensions of the corresponding full-size image
%etcImageFileNameNoExt% | file name without extension of the corresponding full-size image
%etcImageFileName% | file name of the corresponding full-size image
%etcImageFileSize% | file size of the corresponding full-size image

File name field contains file name of the first index page. For most web servers index.html is the most appropriate one.

Navigation links part contains settings for customizing navigation bars used on index pages. By default there are four navigation elements:

First page | links to the previous index page.
Previous | total number of images
Next | links to the next index page.
Last | links to the last index page in the list.

Note! Inappropriate links are omitted, i.e. there is no "First" or "Previous" link on the first page.

Clicking Advanced button brings up a dialog window where you can add one more link: Home - by default links to the root directory of your site, but you can manually enter any web-address for this link.

In this window you can also change images used to display navigation buttons and text labels, which pop up when you point to a navigation button.

Hint: if you want to have text-only navigation links, remove image names from the corresponding fields.

Background part lets you select a background image for your gallery or specify a background color (default background color depends on the style you have selected).

Text colors button is used to control colors of body text and hyperlinks (you may even specify individual custom colors for visited and active hyperlinks).

Users with knowledge of HTML can modify source code of their pages by pressing HTML Template button. This will open the source of a template used to create index pages. Layout of the pages can be modified using standard HTML tags. There are also a few special macro-tags that can be used to alter the content of pages:

<#etcShortTitle> | short title of image (you can specify short title for each image on the page 2. Adding Images)
<#etcLongTitle> | long title of image (you can specify long title for each image on the page 2. Adding images)
<#etcIndexIndex> | index page number
<#etcIndexCount> | total number of index pages
<#etcIndexPageTitle> | insert text entered in Page Title field.
<#etcIndexPageBody> | apply background and text color properties specified in the corresponding fields of this section. We highly recommend to use this macro-tag instead of <body> tag in your HTML templates.
<#etcIndexTable> | insert index table with thumbnails linked to full-size images.
<#etcTopNavLinks> | insert navigation buttons (this macro works only if Navigation Links => Top checkbox is checked).
<#etcBottomNavLinks> | insert navigation buttons (this macro works only if Navigation Links => Bottom checkbox is checked).
<#etcNavLinks> | insert navigation buttons (this macro works in any case).
<#etcImageIndex> | image number
<#etcImageCount> | total number of images
<#etcImageSize> | dimensions of the corresponding full-size image
<#etcImageFileName> | file name without extension of the corresponding full-size image
<#etcImageFileName> | file name of the corresponding full-size image
<#etcImageFileSize> | file size of the corresponding full-size image

Next step: 3.6. Images


Step 3.6. Images

3.6. Project Options: Images

During this step of project creation you may customize your full-size images (resize them and optionally add color borders). This feature of Express Thumbnail Creator may be useful in case you have very big images that will take much time to download and will not fit in browser window.

If you choose to resize the images, just specify the desired dimensions and ETC will shrink your images to fit them. The aspect ratio will automatically be maintained. The height and width values are therefore maximum values.

You can also specify width and color of a border added to resized images (this feature is disabled by default and we recommend to use it responsibly because improper border color can spoil the entire impression).

Auto rename feature lets you bring images names to some common template. Clicking Auto Rename button will bring up a settings window.

Check on Enable Auto Rename checkbox to activate this feature. By default names like image001.jpg, image002.jpg etc. are offered. You can replace the word image with any other word you like. Leading zeros checkbox is used to control the numeric part of the name. When it is marked, all file names have the same number of characters and you can correctly sort them by name.

Note! Disabling Leading zeros option leads to file names like image1.jpg, image2.jpg,.. image10.jpg, image11.jpg, which will be sorted by name as follows: image1.jpg, image10.jpg, image11.jpg, image2.jpg.

By default the number of extension digits is set to 3, which is enough for sites containing up to 999 images. If you have more image files, you may increase the number of digits. You can also make their numbers start from any figure up to 32768.

Image format settings - click this button to adjust quality of generated thumbnails. Image thumbnails are saved in JPEG format, no matter what the format of source images is. JPEG uses lossy compression, which reduces file size deleting unimportant image information. This means that as you increase the compression, you decrease visual quality of the image. You may use this dialog to find the best balance between the two. There are several methods for changing values in the number box. You can type the number, click the spin controls or drag the slider. Check on the Progressive encoding checkbox if you want users to see rough copy of the image as it downloads (the image gradually sharpens as the file loads). Using progressive encoding makes files size a bit bigger.

Next step: 3.7. Image pages


Step 3.7. Image pages

3.7. Project Options: Image pages

You can link thumbnails directly to full-size images (in this case the image itself will load in the browser window when a user clicks on a thumbnail), image pages or nothing at all (if you select this option only thumbnails and index pages will be created).

If you choose to link thumbnails to image pages, you will be offered a number of options for customizing them.

Title parameter is used for customizing a caption displayed at the top of each image page.

This parameter can contain plain text (the same for all image pages), or you can use special expressions, which will add individual text for each page. Here is the list of these expressions:

%etcShortTitle% | short title of image (you can specify short title for each image on the page 2. Adding Images)
%etcLongTitle% | long title of image (you can specify long title for each image on the page 2. Adding images)
%etcImageIndex% | image number
%etcImageCount% | total number of images
%etcImageSize% | dimensions of the corresponding full-size image
%etcImageFileNameNoExt% | file name without extension of the corresponding full-size image
%etcImageFileName% | file name of the corresponding full-size image
%etcImageFileSize% | file size of the corresponding full-size image

File name field contains file name of the first image page. Other pages will be named as image1.html, image2.html etc. (the word image can be replaced with any other you enter in the File name field).

Navigation links part contains settings for navigation bars used on image pages. By default there are five navigation elements:

Index | links to the index page with thumbnails.
First page | links to the first image page in the list.
Previous | links to the previous image page.
Next | links to the next image page.
Last | links to the last image page in the list.

Note! Inappropriate links are omitted, i.e. there is no "First" or "Previous" link on the first page.

Clicking Advanced button brings up a dialog window where you can add one more link: Home - by default links to the root directory of your site, but you can manually enter any web-address for this link.

In this window you can also change images used to display navigation buttons and text labels, which pop up when you point to a navigation button.

Hint: if you want to have text-only navigation links, remove image names from the corresponding fields.

Background part lets you select a background image for your gallery or specify a background color (default background color depends on the style you have selected).

Text colors button is used to control colors of body text and hyperlinks (you may even specify individual custom colors for visited and active hyperlinks).

Users with knowledge of HTML can modify source code of their pages by pressing HTML Template button. This will open the source of a template used to create index pages. Layout of the pages can be modified using standard HTML tags. There are also a few special macro-tags that can be used to alter the content of pages:

<#etcShortTitle> | short title of image (you can specify short title for each image on the page 2. Adding Images)
<#etcLongTitle> | long title of image (you can specify long title for each image on the page 2. Adding images)
<#etcImageIndex> | image number
<#etcImageCount> | total number of images
<#etcImageSize> | dimensions of the corresponding full-size image
<#etcImageFileNameNoExt> | file name without extension of the corresponding full-size image
<#etcImageFileName> | file name of the corresponding full-size image
<#etcImageFileSize> | file size of the corresponding full-size image
<#etcImagePageTitle> | insert text entered in Page Title field.
<#etcImagePageBody> | apply background and text color properties specified in the corresponding fields of this section. We highly recommend to use this macro-tag instead of <body> tag in your HTML templates.
<#etcImage> | insert full-size image.
<#etcTopNavLinks> | insert navigation buttons (this macro works only if Navigation Links => Top checkbox is checked).
<#etcBottomNavLinks> | insert navigation buttons (this macro works only if Navigation Links => Bottom checkbox is checked).
<#etcNavLinks> | insert navigation buttons (this macro works in any case).

Next step: 4. Generate image gallery


Step 4. Generate image gallery

4. Generate image gallery

Well, you are ready to generate you HTML image gallery. Press Generate ALL button and wait for a few seconds till Express Thumbnail Creator proceeds the files.

If in the Options/Destination folders section you have selected Ask me option, you will be prompted to confirm overwrite of each individual image that already exists. Press Yes to All button to overwrite all files without prompting.

Note! If you press No to All button no files will be created or updated.

That's all! Now you may press Show created HTML pages button to see your brand new image gallery!

If you are satisfied with the results, proceed to section 6 to save your project (this will let you use its setting to update this gallery or create the new ones). If something looks not so nice, try other settings.

Next step: 5. Upload files to a ftp server


Step 5. Upload files to a ftp server

5. Upload files to a ftp server

This feature is not available yet. Look it in the following versions of Express Thumbnail Creator.

Next step: 6. Finalize your project


Step 6. Finalize your project

6. Finalize your project

It is good idea to save your project now. Later you may update it. Just click Save project button, enter project name and press <Enter> key.


Other products

Express News Pictures

Express NewsPictures is a newsreader specifically designed for downloading and viewing pictures from newsgroups. It downloads articles with images inside, decodes them and saves on your hard drive. The program lets you preview pictures and filter newsgroups content based on keywords you specify. Click here for more information.